<template>
	<view>


	
		<!-- 头部轮播图 -->
		<view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red">A</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">C</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<person></person>

		<!-- 驾考讲堂 -->
		<view>

			<!-- 头部 -->
			<view class="head">
				<text>驾考小讲堂</text>
				<text class="more">更多</text>
			</view>
			<!-- 内容 -->

			<scroll-view class="score-body" enable-flex scroll-x scroll-with-animation>
				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>
				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>

				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>
				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>

				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>

				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>

				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>

				<view class="scoreItem">
					<image src="/static/uni.png"></image>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import person from "../../components/personal.vue"
	export default {
		components: {

			person: person
		},
		data() {
			return {
				msg: 11,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
			recive(re) {
				console.log(re)
			},
			changeIndicatorDots(e) {
			            this.indicatorDots = !this.indicatorDots
			        },
			        changeAutoplay(e) {
			            this.autoplay = !this.autoplay
			        },
			        intervalChange(e) {
			            this.interval = e.target.value
			        },
			        durationChange(e) {
			            this.duration = e.target.value
			        }
		}


	}
</script>

<style>
	/* 头部轮播图 */
	/* 背景色 */
		.uni-bg-red{
			background:#F76260; color:#FFF;
		}
		.uni-bg-green{
			background:#09BB07; color:#FFF;
		}
		.uni-bg-blue{
			background:#007AFF; color:#FFF;
		}

	
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}



	/* 内容区域 */
	.head {
		font-size: 32rpx;
		padding: 25rpx;
		padding: ;
	}

	.head .more {
		float: right;
		border: 1rpx solid #333;
		padding: 5rpx 20rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
	}

	.score-body {
		display: flex;
		padding: 25rpx;
		white-space: nowrap;
		height: 200rpx;
	}


	.scoreItem {
		width: 200rpx;
		margin-right: 20rpx;

	}

	.scoreItem image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5rpx;
	}
</style>